<template>
  <transition name="fade">
    <div v-if="visible" class="confirm-mask" @click.self="cancel">
      <transition name="slide">
        <div class="confirm-box">
          <div class="confirm-title">{{ title }}</div>
          <div class="confirm-content">{{ content }}</div>

          <div class="confirm-footer">
            <button class="btn btn-cancel" @click="cancel">取消</button>
            <button class="btn btn-primary" @click="confirm">确定</button>
          </div>
        </div>
      </transition>
    </div>
  </transition>
</template>

<script>
export default {
    name: 'Confirm',
    props: {
        // v-model 控制显示
        value: {
            type: Boolean,
            default: false
        },

        // 弹窗标题
        title:  {
            type: String,
            default: '提示'
        },

        // 弹窗内容
        content: {
            type: String,
            required: true
        }
    },

    computed: {
        visible: {
            get() { return this.value },
            set(val) { this.$emit('input', val) }    // v-model 语法糖
        }
    },
    
    methods: {
        cancel() {
            this.visible = false
            this.$emit('on-cancel')
        },
        confirm() {
            this.visible = false
            this.$emit('on-confirm')
        }
    }
}
</script>

<style scoped>
.fade-enter-active, .fade-leave-active { transition: opacity .2s; }
.fade-enter, .fade-leave-to { opacity: 0; }
.slide-enter-active, .slide-leave-active { transition: transform .2s; }
.slide-enter, .slide-leave-to { transform: translateY(20px); }

.confirm-mask{
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
.confirm-box{
  width: 80%;
  max-width: 300px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 16px rgba(0,0,0,.15);
}
.confirm-title{
  font-size: 16px;
  font-weight: 500;
  margin-bottom: 10px;
}
.confirm-content{
  display: flex;
  font-size: 16px;
  color: #333333;
  line-height: 1.5;
  justify-content: center;
  margin-bottom: 20px;
}
.confirm-footer{
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.btn{
  border: none;
  padding: 6px 16px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
}
.btn-cancel{
  background: #f2f2f2;
  color: #333;
}
.btn-primary{
  background: #1e9fff;
  color: #fff;
}
</style>